<template>
  <div class="myChart" ref="myChart"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import { TwoChart } from "@/apis/echartsData/echartData.js";
const myChart = ref(null);
onMounted(() => {
  let ECharts = echarts.init(myChart.value);
  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#e6b600",
        },
      },
    },
    legend: {
      data: ["服饰", "数码", "家电", "家具", "日化"],
      top: 35,
    },
    grid: {
      x: 45,
      y: 70,
      x2: 20,
      y2: 40,
      containLable: true,
    },
    title: {
      text: "每周销量图",
      left: "center",
      textStyle: {
        color: "#fff",
        fontSize: 20,
      },
    },
    xAxis: {
      type: "category",
      data: ["星期1", "星期2", "星期3", "星期4", "星期5", "星期6", "星期7"],
      boundaryGap: false,
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    series: [
      {
        name: "服饰",
        type: "line",
        data: [140, 232, 101, 264, 90, 340, 250],
        smooth: true,
        statck: "Total",
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(128, 255, 165)",
            },
            {
              offset: 1,
              color: "rgb(1, 191, 236)",
            },
          ]),
        },
        lineStyle: {
          width: 0,
        },
        emphasis: {
          focus: "series",
        },
      },
      {
        name: "数码",
        type: "line",
        data: [120, 282, 111, 234, 220, 340, 310],
        stack: "Total", //数据堆叠
        smooth: true, //折线图平滑效果 变成曲线图
        showSymbol: false, //   隐藏所有数据点

        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(0, 221, 255)",
            },
            {
              offset: 1,
              color: "rgb(77, 119, 255)",
            },
          ]),
        },
        lineStyle: {
          // 设置线段样式
          width: 0,
        },
        emphasis: {
          //设置高亮的图形样式和标签样式
          focus: "series", //只显示选中的内容高亮
        },
      },
      {
        name: "家电",
        type: "line",
        data: [320, 132, 201, 334, 190, 130, 220],
        stack: "Total", //数据堆叠
        smooth: true, //折线图平滑效果 变成曲线图
        showSymbol: false, //   隐藏所有数据点

        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(55, 162, 255)",
            },
            {
              offset: 1,
              color: "rgb(116, 21, 219)",
            },
          ]),
        },
        lineStyle: {
          // 设置线段样式
          width: 0,
        },
        emphasis: {
          //设置高亮的图形样式和标签样式
          focus: "series", //只显示选中的内容高亮
        },
      },
      {
        name: "家具",
        type: "line",
        data: [220, 402, 231, 134, 190, 230, 120],
        stack: "Total", //数据堆叠
        smooth: true, //折线图平滑效果 变成曲线图
        showSymbol: false, //   隐藏所有数据点

        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(255, 0, 135)",
            },
            {
              offset: 1,
              color: "rgb(135, 0, 157)",
            },
          ]),
        },
        lineStyle: {
          // 设置线段样式
          width: 0,
        },
        emphasis: {
          //设置高亮的图形样式和标签样式
          focus: "series", //只显示选中的内容高亮
        },
      },
      {
        name: "日化",
        type: "line",
        data: [220, 302, 181, 234, 210, 290, 150],
        stack: "Total", //数据堆叠
        smooth: true, //折线图平滑效果 变成曲线图
        showSymbol: false, //   隐藏所有数据点

        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(255, 191, 0)",
            },
            {
              offset: 1,
              color: "rgb(224, 62, 76)",
            },
          ]),
        },
        lineStyle: {
          // 设置线段样式
          width: 0,
        },
        emphasis: {
          //设置高亮的图形样式和标签样式
          focus: "series", //只显示选中的内容高亮
        },
      },
    ],
  };
  ECharts.setOption(option);
});
</script>


<style lang="less" scoped>
.myChart {
  height: 21rem;
  border: 1px solid blue;
  margin: 1.25rem;
  background-color: rgba(12, 130, 255, 0.65);
  padding-top: 1rem;
}
</style>